<script setup>
import { RouterView, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'

const router = useRouter()
const isLoggedIn = ref(false)

onMounted(() => {
  // 检查登录状态
  checkLoginStatus()
})

// 检查登录状态
const checkLoginStatus = () => {
  isLoggedIn.value = localStorage.getItem('isLoggedIn') === 'true'
}

// 登出功能
const logout = () => {
  localStorage.removeItem('isLoggedIn')
  isLoggedIn.value = false
  router.push('/login')
}
</script>

<template>
  <nav v-if="isLoggedIn">
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/records">记录</RouterLink>
    <RouterLink to="/complementary-food">辅食</RouterLink>
    <RouterLink to="/baby">宝宝</RouterLink>
    <a href="#" @click.prevent="logout" class="logout-link">登出</a>
  </nav>
  <RouterView v-slot="{ Component }">
    <component :is="Component" @login-success="checkLoginStatus" />
  </RouterView>
</template>

<style scoped>
nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 10px;
  background: #f0f0f0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000; /* 增加z-index确保导航栏始终在最上层 */
  height: 50px; /* 进一步减小导航栏高度 */
  -webkit-backface-visibility: hidden; /* 优化移动设备上的性能 */
  backface-visibility: hidden;
  will-change: transform; /* 告诉浏览器该元素会有变化，优化性能 */
  transform: translateZ(0); /* 强制硬件加速 */
}

a {
  color: #2c3e50;
  text-decoration: none;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 0;
}

a.router-link-active {
  font-weight: bold;
  color: #42b883;
}

.logout-link {
  color: #e74c3c;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
